<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素样式操作</title>
		<!-- 元素样式操作  针对css样式的属性和属性值 
		css()      功能：添加任何样式表下的属性和属性值
		            1个参:获取匹配集合元素中第一个css的属性值
					2个参：设置匹配集合元素中所有元素的属性和属性值
					n个参  多层设置匹配集合元素中所有元素的属性和属性值
					 语法值：css("属性":"属性值";"属性":"属性值";)
				   .btn(
				   border:1px solid red;
				   )	
		height()和width()    功能：匹配集合元素中第一个元素的高度和宽度值
		                     无参  获取匹配集合元素中第一个元素的高度和宽度值 
							 有参  设置匹配集合元素中第一个元素的高度和宽度值
		outerHeight() 和 outerWight()
		                     功能：元素的宽高度
							 无参：获取元素宽高度，包含内边距+边框
							 有参：只允许传bool值，true 外加一个外边距
							       
		-->
		<style>
			.box{
				background-color: #55ff7f;
				padding: 20px;
				margin: 20px;
				border: 5px solid #000;
			}
			.result{
				margin-top: 10px;
				font-weight: 700px;
			}
		</style>              
		<script src="../js/jquery-1.11.1.js"></script>
		
	</head>
	<body>
		<!-- .box样式属性：背景颜色  内外边距：20px  边框：5px  
		  .result添加样式属性：上外边距：10px   字体加粗：
		  jq框架引入
		  -->
		<!-- 1.显示效果区域 -->
		<div class="box" id="targetBox"></div>
		<button id="getColorBtn"> 获取背景颜色</button>
		<button id="setColorBtn"> 设置背景颜色</button>
		<button id="setBtn">设置多层效果</button>
		<button id="getWidthBtn">获取元素宽度</button>
		<button id="gbpBtn">获取元素高度【包含内边距+边框】</button>
		<button id="bpmBtn">获取元素高度【包含内边距+边框+外边距】</button>
		<!-- 2.显示效果提示区 -->
		<div id="result" class="result"></div>
		
		<script>
			/* 1.点击 获取背景颜色  按钮 获取背景颜色值 */
			$("#getColorBtn").click(function(){
				//jq .css("属性名")  获取属性值
				var bgColor=$(".box").css("background-color");
				//显示区域--提示：获取的颜色属性值是？
				$("#result").text("获取背景颜色值是："+bgColor);
			});
		    /* 2. 点击 设置背景颜色 按钮 设置背景颜色值*/
			$("#setColorBtn").click(function(){
				//给.box添加颜色橙色
				$(".box").css("background-color","orange");
				//#result 添加一个文本 效果修改为橙色
				$("#result").text("效果已经修改为橙色");
			});
			/* 3. 点击  设置多层效果 按钮  设置效果如下  背景色  倒角  盒子阴影 */
			$("#setBtn").click(function(){
				$(".box").css({"width":"300px",
					           "height":"300px",
					           "background-image":"url(../img/xiangji.png)",
				               "border-radius":"50%",
							   "box-shadow":"5px 5px 50px #ff0",
							   "background-size":"100% 100%",
							   
							   })
			});
			/* 4.点击  获取元素宽度 按钮 获取当前元素的宽高度 */
			$("#getWidthBtn").click(function(){
				var w=$(".box").width();
				$("#result").text("获取的宽度是:"+w+"px");
			});
			/* 5. 点击 获取元素高度【包含：内边距+边框】*/
			$("#gbpBtn").click(function(){
				var gbp=$(".box").outerHeight();
				$("#result").text("高度为"+gbp+"px")
			});
			/* 6. 点击 获取元素高度【】 按钮  传输bool*/
			$("#bpmBtn").click(function(){
				var bpm=$(".box").outerHeight(true);
				$("#result").text("实际高度为"+bpm+"px")
			});
			
		</script>
	</body>
</html>